<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<link rel="stylesheet" type="text/css" th:href="@{/assets/libs/singleFileUpload/pictureUpload.css}" />
	<th:block th:include="tpl :: common_head()"></th:block>
	<script th:src="@{/assets/libs/singleFileUpload/pictureUpload.js}"></script>
	<script type="text/javascript" th:src="@{/assets/libs/webuploader/webuploader.min.js}"></script>
	<title>图片上传</title>
</head>
<style>
	#uploader .statusBar .btns .webuploader-pick {
			display: none;
	}
	.webuploader-element-invisible{display:none}	
</style>
<body>
	<th:block>
		<div>
			<form class="form">
				<fieldset>
					<dl>
						<dd>
							<input id="hiddenInput" readonly="readonly" name="fileNames" type="hidden"/>
						</dd>
						<dt>图片</dt>
						<dd>
							<div id="uploader">
								<div class="queueList">
									<div id="dndArea" class="placeholder">
										<div id="filePicker"></div>
									</div>
									<ul class="filelist">
									</ul>
								</div>
								<div class="statusBar" style="display:none;">
									<div class="progress">
										<span class="text">0%</span>
										<span class="percentage"></span>
									</div>
									<div class="info_del"></div>
									<div class="btns">
										<div id="filePicker2"></div><div class="uploadBtn">上传</div>
									</div>
								</div>
							</div>
						</dd>
					</dl>
				</fieldset>
				<input type="button" value="确定" onclick="post();"/>
			</form>
		</div>
	</th:block>
	<script th:inline="javascript">
		var serverUrl = '../../../image/uploadBannerImage?type='+[[${imageType}]];
		function delectFileByName(image,obj){
	        layer.alert("Are you sure you want to delete it？", {
	            time: 0 //不自动关闭
	            ,btn: ['sure', 'cancel']
	            ,yes: function(index){
	                layer.close(index);
	                obj.parentNode.parentNode.remove();
	                $(".uploaderClass").empty();
	                $("#hiddenInput").val('');
	                var html ="<div class=\'queueList\'><div id=\'dndArea\'class=\'placeholder\'><div id=\'filePicker\'></div></div><ul class=\'filelist\'></ul></div><div class=\'statusBar\'style=\'display:none;\'><div class=\'progress\'><span class=\'text\'>0%</span><span class=\'percentage\'></span></div><div class=\'info\'></div><div class=\'btns\'><div id=\'filePicker2\'></div><div class=\'uploadBtn\'>上传图片</div></div></div>";
	                $(".uploaderClass").html(html);
	                $.getScript("../../../assets/libs/singleFileUpload/pictureUpload.js");
	            }
	       	 });
	    }
		function post(){
			var url = $("#hiddenInput").val();
			var img = parent.window.document.getElementById([[${imageName}]]);
			var parentUrl = img.nextElementSibling;
			console.log(img);
			console.log(parentUrl);
			if(!url){
				//layer.alert("请上传图片");
				//return false;
				//img.src="../../../assets/images/add.png";
				img.src=[[@{/assets/images/add.png}]];
				parentUrl.value = "";
			}else{
				img.src=[[${imageBasePath}]]+url;
				parentUrl.value = url;
			}
			parent.window.close();
		}
	</script>
</body>
</html>